<template>
    <el-dialog
        v-model="dialogOverflowVisible"
        title="公告信息"
        width="500"
        draggable
        overflow
        :close-on-click-modal="false"
    >
        <div class="cart">
            <el-input
                v-model="inputValue"
                class="searchInput"
                style="width: 240px"
                placeholder="搜索区域名称"
            />
            <div class="resultTable">
                <el-table :data="renderData" stripe style="width: 100%">
                    <el-table-column
                        prop="name"
                        label="区域名称"
                        width="180"
                        show-overflow-tooltip
                    />
                    <el-table-column prop="phone" label="物业电话" />
                </el-table>
                <!-- 分页器 -->
                <el-pagination
                    size="small"
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="limit"
                    @current-change="handleCurrentChange"
                />
            </div>
            <div class="notice">
                <div>
                    <span>公告标题：</span>
                    <br />
                    <el-input
                        v-model="noticeTitile"
                        style="width: 80%"
                        placeholder="请输入公告标题"
                    />
                </div>
                <div>
                    <span>公告内容：</span>
                    <br />
                    <el-input
                        v-model="noticeContent"
                        style="width: 80%"
                        :rows="2"
                        type="textarea"
                        placeholder="请输入公告内容"
                    />
                </div>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogOverflowVisible = false"
                    >取消</el-button
                >
                <el-button :plain="true" type="primary" @click="handlePublish">
                    发布
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import { ElMessage } from "element-plus";

import { addNoticeHttp } from "@/request";
const dialogOverflowVisible = computed({
    get: () => props.dialogVisible,
    set: (val) => {
        emit("update:modelValue", val);
    },
});

//接收来自父组件v-model的dialogVisible
const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false,
    },
    resultData: {
        type: Array,
        default: [],
    },
});
//事件声明
const emit = defineEmits(["update:modelValue"]);


//分页渲染数据
const limit = 3;
const curPage = ref(1);
const renderData = computed({
    get: () => {
        //如果搜索框有值，则过滤搜素结果
        let temp = props.resultData;
        if (inputValue.value) {
            temp = props.resultData.filter((item) =>
                item.name.includes(inputValue.value)
            );
        }
        //记录分页信息
        total.value = temp.length;
        //
        const start = (curPage.value - 1) * limit;
        const end = start + limit;
        return temp.slice(start, end);
    },
    set: (val) => {
        console.log(val);
    },
});
const total = ref(0);
const handleCurrentChange = (val) => {
    curPage.value = val;
};


//模糊搜索功能
const inputValue = ref("");


//公告
const noticeTitile = ref("");
const noticeContent = ref("");

//发布公告
const handlePublish = async () => {
    //校验公告内容
    if (noticeContent.value === "" || noticeTitile.value === "") {
        ElMessage.error("请完善公告内容");
        return;
    }
    try {
        await addNoticeHttp({
            title: noticeTitile.value,
            content: noticeContent.value,
            time: new Date().toLocaleString(),
        });
        dialogOverflowVisible.value = false;
        noticeContent.value = "";
        noticeTitile.value = "";
        ElMessage.success("发布成功");
    } catch (error) {
        ElMessage.error("发布失败");
    }
};
</script>

<style scoped>
.cart {
    padding: 0 20px;
}
.cart .notice {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}
.cart .notice span {
    display: inline-block;
    font-weight: 550;
    margin-bottom: 10px;
}
</style>
